<template>
<div id="pay">
	<div v-show="action == ''" class="page">
		<sub-page-header title="确认订单"></sub-page-header>
		<div class="white-box" @click="action = 'selectAddress'">
			<el-row :gutter="10" class="text-center address">
				<el-col :span="4">
					<i class="iconfont icon-position"></i>
				</el-col>
				<el-col class="text-left" :span="16">
					<p v-if="!selectedAddress.id" style="margin-top: 20px;">请选择地区</p>
					<div v-else>
						<p>{{selectedAddress.accept_name}} {{selectedAddress.mobile}}</p>
						<p>
							{{selectedAddress.province_region ? selectedAddress.province_region.name : '' }}
			                {{selectedAddress.city_region ? selectedAddress.city_region.name : ''}}
			                {{selectedAddress.area_region ? selectedAddress.area_region.name : ''}}
			                {{selectedAddress.address}}
	                	</p>
					</div>
				</el-col>
				<el-col :span="4">
					<i class="iconfont icon-right"></i>
				</el-col>
			</el-row>
		</div>
		<div class="gain-line"></div>
		<div class="white-box">
			<div class="goods">
				<el-row v-for="(item, index) in order.item" :gutter="10" class="good" :key="index">
					<el-col :span="7">
						<img class="goods-img" :src="item.product.thumbnail" alt="">
					</el-col>
					<el-col :span="14">
						<p>{{item.product.title}} </p>
						<p class="text-assit"><small>规格：{{item.item.title}}  重量：{{item.item.weight}}</small>
						</p>
						<p><span class="text-price">£{{item.price}}</span></p>
					</el-col>
					<el-col :span="3" class="number">
						x{{item.qty * 1}}
					</el-col>
				</el-row>
			</div>
			<ul class="list-info">
				<li>
					<div class="pull-left">送货费用</div>
					<div class="pull-right">£{{order.shipping_fee}}</div>
				</li>
				<li>
					<div class="pull-left">优惠金额</div>
					<div class="pull-right">{{order.cut_fee}}</div>
				</li>
				<li>
					<div class="pull-left">送货日期</div>
					<div class="pull-right" @click="picker.show();">
						{{order.shipping_date ? order.shipping_date : '请选择日期'}}
					</div>
				</li>
				<li>
					<div class="pull-left">送货时间</div>
					<div class="pull-right" @click="timePicker.show();">
						{{order.shipping_time ? order.shipping_time : '请选择时间'}}
					</div>
				</li>
				<li class="text-right">
					共 {{order.item ? order.item.length : 0}} 件商品，总重{{order.weight}}g 小计：<span class="text-price">£{{(order.total - order.cut_fee).toFixed(2)}}</span>
				</li>
			</ul>
		</div>
		<h4 style="margin-left: 10px;">选择支付方式</h4>
		<ul class="list-info">
			<li>
				<div class="pull-left"><i class="iconfont icon-paypal"></i> paypal支付</div>
				<div class="pull-right">
					<el-radio v-model="paymentPlaform" :label="3"><span></span></el-radio>
				</div>
			</li>
			<li v-if="user.balance > order.total">
				<div class="pull-left"><i class="iconfont icon-danger icon-yue"></i> 余额支付</div>
				<div class="pull-right">
					<el-radio v-model="paymentPlaform" :label="4"><span></span></el-radio>
				</div>
			</li>
		</ul>
		<div class="footer">
			<div class="pull-right">
				需支付： <span class="text-price">£{{(order.total - order.cut_fee).toFixed(2)}}</span>
				<button @click="pay" class="btn btn-normal btn-rect">立即支付</button>
			</div>
		</div>
	</div>
	<div v-show="action == 'selectAddress'" class="page">
		<sl-address @loadedAddresses="setDefaultAddress" :showSelect="true" @select="onSelect" @back="action = ''" :triggerBack="false"></sl-address>
	</div>
	<div class="bottom-margin"></div>
</div>
</template>

<script>
import SubPageHeader from '~/components/SubPageHeader.vue';
import SlAddress from '~/views/Me/SlAddress.vue';
import api from '~/api/api.js';
import Picker from 'better-picker';

export default {
	components: {
		SubPageHeader,
		SlAddress
	},
	data () {
		return {
			picker:null,
			timePicker: null,
			action: '',
			order: {
				shipping_date: '',
				shipping_time: '',
			},
			user: {},
			selectedAddress: {},
			paymentPlaform: 3,
			addresses: [
			],
			years: [

			],
			months: [
			],
			days: [
			],
			times: [
				{
					text: '12:00',
					value: '12:00'
				},
				{
					text: '13:00',
					value: '13:00'
				},
				{
					text: '14:00',
					value: '14:00'
				},
				{
					text: '15:00',
					value: '15:00'
				},
				{
					text: '16:00',
					value: '16:00'
				},
				{
					text: '17:00',
					value: '17:00'
				},
				{
					text: '18:00',
					value: '18:00'
				},
				{
					text: '19:00',
					value: '19:00'
				}
			]
		}
	},
	created () {
		let date = new Date();
		let nowYear = date.getFullYear();
		let now = new Date();
		this.years.push({
			text: nowYear+'年',
			value: nowYear
		});
		this.years.push({
			text: nowYear+1+'年',
			value: nowYear+1
		});
		for(let i =1; i<13; i++) {
			this.months.push({
				text: i+'月',
				value: i
			});
		}
		for(let i =1; i<32; i++) {
			this.days.push({
				text: i+'日',
				value: i
			});
		}

		this.picker = new Picker({
			data: [this.years, this.months, this.days],
			selectedIndex: [0, now.getMonth(), now.getDate()-1],
			title: '选择送货日期'
		});
		this.picker.on('picker.valuechange', (selectedVal, selectedIndex) => {
			selectedVal.forEach(function (item, index, arr) {
				if (item < 10) {
					item  = '0'+item;
				}
				arr[index] = item;
			})
			this.order.shipping_date = selectedVal.join('-');
			let selectedDate = new Date(this.order.shipping_date);
			let today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

			if (selectedDate.getTime() < today.getTime()) {
				this.$message({
					type: 'warning',
					message: '日期不可小于当前日期',
					showClose: true
				});
				return this.order.shipping_date = '';
			}

		});
		this.timePicker = new Picker({
			data: [this.times],
			selectedIndex:[0],
			title: '选择送货时间'
		});

		this.timePicker.on('picker.valuechange', (selectedVal, selectedIndex) => {
			let datetime = new Date(this.order.shipping_date + ' ' + selectedVal[0]);
			if (datetime < now) {
				this.$message({
					type: 'warning',
					message: '日期不可小于当前日期',
					showClose: true
				});
				return;
			}
			this.order.shipping_time = selectedVal[0];
		});

		api.get('/order/detail/'+this.$route.params.id)
		.then(response => {
			this.$set(this, 'order', response.data.order);
			this.$set(this, 'user', response.data.user);
		})
		.catch(error => {
			this.$message.error('加载失败');
		});
	},
	methods: {
		// 设置默认的地址
		setDefaultAddress (addresses) {
			for(let k in addresses) {
				if (addresses[k].is_default != 0) {
					this.selectedAddress = Object.assign({}, addresses[k]);
					break;
				}
			}
		},
		setShippingDate (val) {
			this.order.shipping_date = val;
		},
		// 地址选择
		onSelect (item) {
			item.checked = false;
			this.action = '';
			this.selectedAddress = item;
		},
		// 去支付
		pay () {
			if (!this.selectedAddress.id) {
				return this.$message.warning('请选择地址');
			}
			if (!this.order.shipping_date) {
				return this.$message.warning('请选择送货日期');
			}
			if (!this.order.shipping_time) {
				return this.$message.warning('请选择送货时间');
			}

			var pay_type = 'paypal';

			if (this.paymentPlaform == 3) {
				pay_type = 'paypal';
			} else if (this.paymentPlaform == 4){
				return this.$confirm('您确定要用余额支付吗?')
				.then((_) => {
					pay_type = 'balance';
					window.location.href= 'http://test.rcbao-online.com/api/pay/index/'+this.order.id+`?address=${this.selectedAddress.id}&shipping_date=${this.order.shipping_date}&shipping_time=${this.order.shipping_time}&pay_type=${pay_type}`;
				});
			}

			window.location.href= 'http://test.rcbao-online.com/api/pay/index/'+this.order.id+`?address=${this.selectedAddress.id}&shipping_date=${this.order.shipping_date}&shipping_time=${this.order.shipping_time}&pay_type=${pay_type}`;
		}
	}
}
</script>

<style scoped>
	#pay {
		margin-bottom: 80px;
	}
	.white-box {
		padding: 15px 0px 0px 0px;
		background-color: #fff;
	}

	.white-box .address .icon-position, .white-box .address .icon-right {
		line-height: 60px;
	}

	.gain-line {
	    width: 100%;
	    height: 7px;
	    background: url(../../assets/line.jpg) repeat;
	}

	.goods .good {
		border-bottom: 1px solid #eaeaea;
		padding: 10px 0px;
	}

	.goods img {
		max-width: 100%;
		height: 80px;
	}

	.goods .number {
		line-height: 80px;
	}

	.goods .goods-img {
		margin-left: 15px;
	}

	.list-info {
		background-color: #fff;
	}

	.list-info li {
		padding: 15px 10px;
		border-bottom: 1px solid #eaeaea;
		overflow: hidden;
	}

	.footer {
		height: 50px;
		line-height: 50px;
		position: fixed;
		bottom: 0px;
		width: 100%;
		background-color: #fff;
		box-shadow: 0px 0px 2px 0px #eaeaea;
	}

	.footer .btn {
		height: 50px;
	}
</style>
